@import '../../variables';

.collection {
	padding: 20px 0 0;
	border-bottom: 2px solid #eef4f4;
	background-color: #fff;
	z-index: 990;

	&.affix {
		position: fixed !important;
		top: 117px;
		right: 0;
		left: 0;

		@media (max-width: @screen-xs-max) and (min-width: @grid-float-breakpoint) {
			top: 184px;
		}
	}

	// hasFlash = false
	.input-group {
		width: 100%;
	}

	.collection-link {
		width: 100%;
		border: 2px solid #dce5e5;
		background-color: transparent;
		padding: 12.5px 15px;
		font-size: 15px;
		color: #5a8483;
		outline: none;

		&[disabled] {
			opacity: .65;
		}
	}

	.collection-btn-wrapper {
		text-align: right;

		.collection-btn {
			padding: 14px 30px;

			.collection-count {
				color: #eb4c36;
				padding-right: 5px;
			}
		}
	}

	.collection-files {
		padding-top: 15px;

		.collection-file {
			margin: 5px 5px 0 0;
			display: inline-block;
			background-color: #ffe171;
			border: 2px solid #ffc900;
			padding: 6px 10px;
			color: #092d3d;

			.fa {
				margin: 0 0 0 5px;
				color: #eb4c36;
			}
		}
	}

	.collection-toggle-btn {
		min-width: 50px;
		height: 14px;
		background-color: #eef4f4;
		position: relative;
		bottom: -2px;
		line-height: 10px;
		border: none;
		padding: 0;
		margin-left: calc(50% - 25px);
		outline: none !important;

		.fa {
			margin-top: -5px;
		}
	}
}
